<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>添加日程</title>
    <link rel="stylesheet" href="https://cdn.staticfile.org/element-ui/2.15.9/theme-chalk/index.css">
    <style>
        body{
            margin: 0;
            padding:0;
        }
        .el-main {
            background-color: #E9EEF3;
            color: #333;
        }
        body > .el-container {
            margin-bottom: 40px;
        }
        .button{
            text-align: center;
            display: block;
            margin: 24px auto;
        }
    </style>
</head>
<body>
<div id="app">
    <el-container>
        <el-main>
            <el-card shadow="hover">
                <h2>添加日程</h2>
                <div>
                    <h3>日程记录内容:</h3>
                    <el-input
                            type="textarea"
                            :autosize="{minRows:10,maxRows:50}"
                            placeholder="请输入内容"
                            show-word-limit
                            maxlength="1000"
                            v-model="scheduleDTO.scheduleContent"
                            resize="none"
                            name="scheduleContent"
                            class="textarea"
                            wrap="hard"
                            clearable
                            @input="checkForm"></el-input>
                    <h3>开始日期-结束日期(必填):</h3>
                    <el-date-picker
                            v-model="scheduleDTO.time"
                            type="datetimerange"
                            placeholder="选择日期"
                            name="startTime"
                            range-separator="至"
                            @input = "checkForm"
                            value-format="yyyy-MM-dd HH:mm:ss"
                            required></el-date-picker>
                    <h3>提醒时间(必填):</h3>
                    <el-date-picker
                            v-model="scheduleDTO.reminderTime"
                            type="datetime"
                            placeholder="选择日期"
                            name="reminderTime"
                            value-format="yyyy-MM-dd HH:mm:ss"
                            @input = "checkForm"
                            required></el-date-picker>
                    <div class="button">
                        <el-button  round  @click="v.add()" :disabled="!isFormComplete" v-loading.fullscreen.lock="fullscreenLoading" style="background-color:#FFC200;border-color: #ffffff;color: #000000">添加</el-button>
                        <el-button  round  @click="v.back()" v-loading.fullscreen.lock="fullscreenLoading" style="background-color:#FFC200;border-color: #ffffff;color: #000000">取消</el-button>
                    </div>
                </div>
            </el-card>
        </el-main>
    </el-container>

</div>
</body>
<!-- import Vue before Element -->
<script src="https://cdn.staticfile.org/vue/2.6.14/vue.min.js"></script>
<!-- import JavaScript -->
<script src="https://cdn.staticfile.org/element-ui/2.15.9/index.min.js"></script>
<!--引入Axios-->
<script src="https://cdn.bootcss.com/axios/0.18.0/axios.min.js"></script>
<script>
    let v = new Vue({
        el: '#app',
        data: function () {
            return {
                scheduleDTO:{
                    scheduleContent:"",
                    time:[],
                    reminderTime:""
                },
                isFormComplete:false,
                fullscreenLoading: false
            }
        },
        methods: {
            //6,检测是否所有信息都填写完整后才能将添加按钮变为可用
            checkForm() {
                // 判断所有信息是否都存在
                if (
                    v.scheduleDTO.time.length &&
                    v.scheduleDTO.reminderTime
                ) {
                    v.isFormComplete = true;
                } else {
                    v.isFormComplete = false;
                }
            },
            //7,返回日程管理页面
            back(){
                v.fullscreenLoading = true;
                setTimeout(() => {
                    v.fullscreenLoading = false;
                    location.href="schedule.html";
                }, 2000);
            },
            // 添加一条日志并且退回到日程管理界面
            add(){
                v.setReminder();
                axios.post("/schedule/add",v.scheduleDTO).then(function (response){
                    v.fullscreenLoading = true;
                    setTimeout(() => {
                        v.fullscreenLoading = false;
                        location.href="schedule.html";
                    }, 2000);
                })
            },
            setReminder() {
                const timestamp = new Date(v.scheduleDTO.reminderTime).getTime();
                const currentTime = new Date().getTime();
                if (timestamp <= currentTime) {
                    v.alerts();
                    return;
                }
                const delay = timestamp - currentTime;
                console.log(delay);
                setTimeout(() => {
                    v.reminder('提醒内容：'+v.scheduleDTO.scheduleContent,'提醒时间：'+v.scheduleDTO.reminderTime);
                }, delay);
            },
            reminder(title, msg) {
                this.$notify({
                    title: title,
                    message: msg,
                    type: 'success'
                })
            },
            openFullScreen1() {
                this.fullscreenLoading = true;
                setTimeout(() => {
                    this.fullscreenLoading = false;
                }, 2000);
            },
            alerts() {
                this.$alert('您所选择的提醒时间点已经是过去时了，无法进行选择', '提示信息', {
                    confirmButtonText: '确定'
                });
            }

        }
    })
</script>
</html>